<template>
  <div class=''>
    <h2>state:</h2>
    <h2>{{ $store.state.findvuex.age }}</h2>
    <h2>{{ $store.state.findvuex.name }}</h2>
    <h2>count：{{ $store.state.findvuex.count }}</h2>

    <h2>{{ $store.state.findvuex.books }}</h2>


    <h2>---------------------------</h2>
    <h2>getters:</h2>
    <h2>{{ getbooksData }}</h2>
    <h2>{{ getbigBooks}}</h2>
    <h2>getters可以直接写在页面：{{  $store.getters.getbigbooks }}</h2>
    <!-- <button @click="add">点击</button> -->

    <h2>---------------------------</h2>
    <h2>mutations</h2>
    <button @click="addy(5)">点击+5</button>
    <button @click="addy(10)">点击+10</button>
    <button @click="addybooks">点击添加books</button>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
         res:{
            id:5,
            status:true,
            title:'化学'
        }
      };
    },
  //监听属性 类似于data概念
  computed: {
         getbooksData(){
            return this.$store.getters.getbooks
         },
         getbigBooks(){
            return this.$store.getters.getbigbooks
         }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //  add(){
    //     this.$store.state.findvuex.age++//直接修改是不对的 通过vuex中mutations修改age
    //  }
    // add(){
    //     this.$store.commit('addx')
    // }

    addy(n){
      this.$store.commit('addxcount',n)
    },
    addybooks(){
        this.$store.commit('addybook',this.res)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
      console.log(this.$store);
    //  this.$store.dispatch('asyncgetAction');
    // this.$store.dispatch('asyncgetAction',5);
    this.$store.dispatch('asyncgetAction',10);
  },
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类

</style>